<template>
  <!-- 
  <b-modal ref="my-modal" hide-footer title="Using Component Methods">
   <div class="d-block text-center">
     <h3>Hello From My Modal!</h3>
   </div>
   <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
   <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
 </b-modal> 
  -->
  <!--
      body-class="modalStyle" 表示样式
      size="lg" 表示模态窗口大小 xl,lg,sm,full
      hide-footer 表示隐藏底部按钮
      hide-header 表示隐藏头部内容
      no-close-on-backdrop 表示鼠标点击背景不可关闭
      hide-header-close 表示隐藏头部关闭按钮
      centered 居中
      ok-title=“确定” 
      cancel-title=取消
      @ok="handleOk" 
      @cancel="handleCancel"
      scrollable 滚动条
      hide-backdrop 隐藏背景
      wrapClassName="ant-modal-cust-warp" 
      style="top:5%;height: 85%;overflow-y: hidden" 样式
  -->
  <b-modal ref="my-modal" title="用户权限" scrollable hide-footer no-close-on-backdrop>
      <div class="d-block text-center">
          <div class="card card-custom gutter-b example example-compact" id="tableUserRoleBody">               
              <!--分页组件-->
              <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row :data="roleDataList" >
              <el-table-column label="序号" width="80">
                  <template slot-scope="scope">
                  {{scope.$index+1}} 
                  </template>
              </el-table-column>
              <el-table-column align="left" prop="roleName" label="名称"></el-table-column>       
              </el-table>
              <div class="block">
              <el-pagination
                  hide-on-single-page   
                  @size-change="handleSizeChange"        
                  @current-change="handleCurrentChange"  
                  :current-page="pageNo"                
                  :page-sizes="[5, 10, 30, 50]"          
                  :page-size="pageSize"			  
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">		
              </el-pagination>
              </div>
          </div>
      </div>
      <template slot="modal-footer">
          <!--自定义按钮-->
      </template>
   </b-modal>
</template>  
<style scoped>
.card.card-custom {
box-shadow: 0px 0px 30px 0px #fff !important;
}
</style>
<script>
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js"; 
import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
export default {
  data(){
    return{
      searchForm:{},
      roleDataList:[],
      sels: [], //当前选框选中的值
      pageNo:1,      // 默认当前是第一页
      pageSize:5,    // 当前每页的数据是5条
      totalCount:0   // 总数默认为0
    }
  },
  components: {
  },
  mounted() {
  },
  methods:{
    showModal(id) {        
      this.$refs['my-modal'].show();
      this.initList(id);   // 按当前的页号和每页的数据量进行查询
    },
    hideModal() {
      this.$refs['my-modal'].hide()
    },
    toggleModal() {
      // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
      this.$refs['my-modal'].toggle('#toggle-btn')
    },
    initList(id){
      showWating({renderBody:"tableUserRoleBody"});
      var params = {};
      params.usePageNo = true;//采用第几页进行分页（兼容）
      params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
      params.pageNo = this.pageNo;//开始的记录序号   
      params.searchJson = JSON.stringify(this.searchForm);//为form元素     
      apiUtil.queryPage(process.env.VUE_APP_OAUTH_API+"/oauthRole/roleList/"+id, params).then(({ data }) => {
        this.roleDataList = data.data;//给结果集赋值
        this.totalCount = data.total;// 获取当前数据的总数    
      });
    },      
    handleSelectionChange(sels) {//获取选中的值
      this.sels = sels;
    },
    handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
      this.pageSize = val;  // 修改页的大小
      this.initList();       // 按新的pageNo和pageSize进行查询
    },
    handleCurrentChange(val) { // 修改当前页所触发的函数
      this.pageNo = val;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    search(){
      this.pageNo = 1;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    resetAll(){
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
      this.search();
    },
  }
};
</script>